<script setup lang="ts">
import useApi from './useApi';
import { ref } from 'vue'
import msgModal from './components/msgModal.vue'
import homepage from './components/homepage.vue'
const msgModalRef = ref(msgModal);
let isLogin = ref(true);
let username = ref(''),password=ref(''),inputType = ref(1);
const showModal = (title) => {
	if(msgModalRef.value){
		msgModalRef.value.openMsg(title);
	}
}
const inputKeyNum = (event) => {
  let inputText = event.target.innerText;
  
  // 如果是字母，转换为小写
  if (/[A-Z]/.test(inputText)) {
    inputText = inputText.toLowerCase();
  }
  
  if(inputType.value == 1){
    username.value = username.value + inputText;
  }else{
    password.value = password.value + inputText;
  }
}
const deleteKeyNum = () => {
	if(inputType.value == 1){
		username.value = username.value.substring(0,username.value.length-1);
	}else{
		password.value = password.value.substring(0,password.value.length-1);
	}
}
const login = async () => {
	const bodyData = ref({});
	if(username.value == '' || password.value == ''){
		showModal('请输入用户名和密码');
		return;
	}
	bodyData.value = {
		username:username.value,
		password:password.value
	}
	const options:any = {
		headers: {
			"Content-Type": "application/json",
			"token":localStorage.getItem('token')
		},
		method: "POST",
		body:JSON.stringify(bodyData.value)
	};
	
	try {
		const res:any = await useApi('check',options);
		
		if(res.code == 1){
			localStorage.setItem('token',res.token);
			localStorage.setItem('title',res.data);
			localStorage.setItem('shopId',res.shopId);
			isLogin.value = false;
		}else{
			showModal(res.msg);
		}
	} catch (error) {
		console.error('登录请求失败:', error);
		showModal('网络连接失败，请检查网络后重试');
	}
}
const close = () => {
	window.electron.ipcRenderer.send('logout');
}
</script> 

<template>
  <main class="logintohomepagemain" v-if="!isLogin">
    <homepage />
  </main>
  <main class="loginmain" v-if="isLogin">
    <msgModal ref="msgModalRef"/>
    <div class="login-container">
      <div class="login-card">
        <div class="login-header">
          <img src="./assets/logo.jpg" alt="Logo" class="logo">
          <h1 class="title">八臻八戒收银系统</h1>
        </div>
        
        <div class="login-form">
          <div class="input-group">
            <label for="username">用户名</label>
            <input 
              type="text" 
              id="username"
              @click="inputType = 1" 
              v-model="username" 
              placeholder="请输入用户名"
            >
          </div>
          
          <div class="input-group">
            <label for="password">密码</label>
            <input 
              type="password" 
              id="password"
              @click="inputType = 2" 
              v-model="password" 
              placeholder="请输入密码"
            >
          </div>
        </div>
        
        <div class="keyboard">
          <div class="row">
            <button @click="inputKeyNum" class="key">1</button>
            <button @click="inputKeyNum" class="key">2</button>
            <button @click="inputKeyNum" class="key">3</button>
            <button @click="inputKeyNum" class="key">4</button>
            <button @click="inputKeyNum" class="key">5</button>
            <button @click="inputKeyNum" class="key">6</button>
            <button @click="inputKeyNum" class="key">7</button>
            <button @click="inputKeyNum" class="key">8</button>
            <button @click="inputKeyNum" class="key">9</button>
            <button @click="inputKeyNum" class="key">0</button>
            <button @click="deleteKeyNum" class="key delete-key">删除</button>
          </div>
          <div class="row">
            <button @click="inputKeyNum" class="key">Q</button>
            <button @click="inputKeyNum" class="key">W</button>
            <button @click="inputKeyNum" class="key">E</button>
            <button @click="inputKeyNum" class="key">R</button>
            <button @click="inputKeyNum" class="key">T</button>
            <button @click="inputKeyNum" class="key">Y</button>
            <button @click="inputKeyNum" class="key">U</button>
            <button @click="inputKeyNum" class="key">I</button>
            <button @click="inputKeyNum" class="key">O</button>
            <button @click="inputKeyNum" class="key">P</button>
          </div>
          <div class="row">
            <button @click="inputKeyNum" class="key">A</button>
            <button @click="inputKeyNum" class="key">S</button>
            <button @click="inputKeyNum" class="key">D</button>
            <button @click="inputKeyNum" class="key">F</button>
            <button @click="inputKeyNum" class="key">G</button>
            <button @click="inputKeyNum" class="key">H</button>
            <button @click="inputKeyNum" class="key">J</button>
            <button @click="inputKeyNum" class="key">K</button>
            <button @click="inputKeyNum" class="key">L</button>
          </div>
          <div class="row">
            <button @click="inputKeyNum" class="key">Z</button>
            <button @click="inputKeyNum" class="key">X</button>
            <button @click="inputKeyNum" class="key">C</button>
            <button @click="inputKeyNum" class="key">V</button>
            <button @click="inputKeyNum" class="key">B</button>
            <button @click="inputKeyNum" class="key">N</button>
            <button @click="inputKeyNum" class="key">M</button>
          </div>
        </div>
        
        <div class="login-actions">
          <button type="button" @click="login" class="login-btn">登录</button>
          <button type="button" @click="close" class="exit-btn">退出</button>
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="scss">
#app{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
}

html{
  width: 100%;
  height: 100%;
}

body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: block;
  font-family: 'Microsoft YaHei', sans-serif;
}

.logintohomepagemain{
  height: 100%;
}

.loginmain{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(/src/assets/1.png);
  .login-container {
    width: 100%;
    max-width: 50%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .login-card {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .logo {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    .title {
      margin-top: 15px;
      font-size: 28px;
      color: #333;
      font-weight: 600;
    }
  }
  
  .login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    
    .input-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      
      label {
        font-size: 16px;
        color: #333; /* 修改为蓝色 */
        font-weight: 500;
      }
      
      input {
        height: 50px;
        border-radius: 8px;
        border: 2px solid #1976D2; /* 修改为蓝色边框 */
        padding: 0 15px;
        font-size: 16px;
        transition: all 0.3s;
        
        &:focus {
          outline: none;
          border-color: #1976D2; /* 保持蓝色 */
          box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2); /* 蓝色阴影 */
        }
        
        &::placeholder {
          color: #ccc; /* 修改为浅灰色占位符 */
        }
      }
    }
  }
  
  .keyboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0;
    
    .row {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    
    .key {
      flex: 1;
      min-width: 40px;
      height: 50px;
      border-radius: 8px;
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      font-size: 18px;
      font-weight: 500;
      color: #333;
      cursor: pointer;
      transition: all 0.2s;
      
      &:hover {
        background-color: #e9e9e9;
      }
      
      &:active {
        background-color: #ddd;
        transform: translateY(2px);
      }
    }
    
    .delete-key {
      flex: 2;
      background-color: #ffebee;
      color: #e53935;
      
      &:hover {
        background-color: #ffcdd2;
      }
    }
  }
  
  .login-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    
    button {
      flex: 1;
      height: 55px;
      border-radius: 8px;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      border: none;
    }
    
    .login-btn {
      background-color: #1976D2; /* 修改为蓝色 */
      color: white;
      
      &:hover {
        background-color: #1565C0; /* 深蓝色悬停效果 */
      }
      
      &:active {
        transform: translateY(2px);
      }
    }
    
    .exit-btn {
      background-color: #E3F2FD; /* 浅蓝色背景 */
      color: #1565C0; /* 深蓝色文字 */
      
      &:hover {
        background-color: #BBDEFB; /* 更深的浅蓝色悬停效果 */
      }
      
      &:active {
        transform: translateY(2px);
      }
    }
  }
}
</style>